<!--
 * @Author: your name
 * @Date: 2021-09-28 11:46:27
 * @LastEditTime: 2021-09-28 14:46:53
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \xxtx-ui\src\views\components\Contact.vue
-->
<template>
  <div>
    <section class="contact" id="contact">

    <h1 class="heading"> <span>contact</span> us </h1>

    <form action="">
        <div class="inputBox">
            <input type="text" placeholder="name">
            <input type="email" placeholder="email">
        </div>
        <div class="inputBox">
            <input type="number" placeholder="number">
            <input type="text" placeholder="subject">
        </div>
        <textarea name="" placeholder="your message" id="" cols="30" rows="10"></textarea>
        <input type="submit" value="send message" class="btn">
    </form>

</section>
  </div>
</template>
<script>
export default {
  
}
</script>
<style >
  .contact form{
    max-width: 70rem;
    margin:1rem auto;
    text-align: center;
}

.contact form .inputBox{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.contact form .inputBox input,
.contact form textarea{
    width: 100%;
    background:#f0dfee;
    border-radius: .5rem;
    padding:1rem;
    margin:2rem 0;
    font-size: 1.5rem;
    color:black;
    text-transform: none;
}

.contact form .inputBox input::placeholder,
.contact form textarea::placeholder{
    color:black;
    text-transform: capitalize;
}

.contact form .inputBox input:focus,
.contact form textarea:focus{
    background:#98b4b3;
}

.contact form .inputBox input{
    width: 49%;
}

.contact form textarea{
    resize: none;
}

</style>